<template>
  <div class="tablePadding">
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column
        v-for="(item, index) in headerData"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
        <template slot-scope="scope">
          <span v-if="!item.slot">{{ scope.row[item.prop] }} </span>
          <slot :name="item.prop" v-bind:row="scope.row"></slot>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button 
                    @click="handleClick(scope)" 
                    type="text" size="small"
                    >删除</el-button> -->
          <!-- 
                        子组件定义插槽 
                        slot标签 
                        name="插槽名"
                        v-bind:子组件传递的数据名字 ="传递过去的数据"
                    -->
          <slot
            name="menu"
            v-bind:row="scope.row"
            v-bind:index="scope.$index"
          ></slot>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "order",
  data() {
    return {
      currentPage4: 1,
    };
  },
  // 当前子组件接收父组件传过来的值 我们使用peops接参
  props: {
    // 有分页时候显示的总条数
    total: {
      type: Number,
      default: () => {
        return 0;
      },
    },
    // 该组件是否需要显示分页
    pagination: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 子组件接收的名字：{}
    headerData: {
      type: Array, //type定义类型 父组件传递的数据类型
      default: () => {
        // 如果父组件没有传递该值过来 那么默认是什么数据
        return [];
      },
    },
    tableData: {
      type: Array, //type定义类型 父组件传递的数据类型
      default: () => {
        // 如果父组件没有传递该值过来 那么默认是什么数据
        return [];
      },
    },
    // 带斑马纹表格 可以带可以不带 根据父组件传子组件决定
    // 带边框表格 可以带可以不带 根据父组件传子组件决定
    // 是否固定表头
  },
  methods: {
    handleClick(row) {
      console.log(row.$index);
      let _self = this;
      // this.$emit("父组件接收的名字",&第二个参数可不填用不到的话&传递给父组件的数据)
      // 子组件王父组件触发时间并且传递参数 用$emit
      _self.$emit("del", row.$index);
    },
    handleSizeChange(val) {
      let _self = this;
      // console.log(`每页 ${val} 条`);
      // 回去切换一页显示多少条
      _self.$emit("SizeChange", val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // val当前切换的第几页
      let _self = this;
      _self.$emit("CurrentChange", val);
    },
  },
};
</script>
<style scope>
.tablePadding {
  padding: 0px 20px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.clear {
  clear: both;
}
.el-table th.el-table__cell > .cell {
  text-align: center;
}
.el-table td.el-table__cell div {
  text-align: center;
}
</style>